<template>
	<view class="uni-flex uni-column" 
		style="height:100%;width:100%;justify-content:space-between;align-items:center;">
		<scroll-view scroll-y>
			<uni-card :is-shadow="false" v-for="(it, index) in factoryList">
				<view class="uni-flex uni-column facotry-item">
					<view class="uni-flex uni-row">
						<view class="uni-flex uni-row" 
						style="align-items:center;flex-grow:2;">
							<view>
								<image class="header-img" :src="it.headerImg"></image>
							</view>
							<view class="uni-flex uni-column" style="padding-left:24rpx;">
								<view>
									<text style="font-size:12pt;">{{it.name}}</text>
								</view>
								<view class="uni-flex uni-column"
									style="font-size:10pt;padding-top:24rpx;color:#7B7B7B;">
									<view>
										<text>{{it.linkman}}</text>
									</view>
									<view>
										<text>{{it.phone}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="uni-flex uni-column">
							<view class="uni-flex uni-row"
								style="align-items:center; font-size:9pt;color:#7B7B7B;align-items:center;">
								<image style="width:30rpx;height:30rpx;" 
								src="../../static/image/edit.png"></image>
								<text>编辑</text>
							</view>
						</view>
					</view>
					
					<view class="uni-flex uni-column" style="font-size:10pt;">
						<view class="uni-flex uni-row" style="align-items:center;padding:4rpx 0;color:#1A75EA;"
							v-for="(cargo, c) in it.cargoList">
							<view style="width:50%;">{{cargo.name}}</view>
							<view class="uni-flex uni-row" style="width:50%;justify-content:center;">
								<view class="uni-flex uni-row"
									v-for="(size, s) in cargo.sizeList">
									<view v-if="s > 0" style="border-left: 1rpx solid #D2D2D2;width:2rpx;margin:16rpx 0">
									</view>
									<view class="uni-flex uni-column" style="align-items:center;width:80rpx;">
										<view>{{size.count}}</view>
										<view style="color:#7B7B7B;">{{size.name}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="display:flex;justify-content: center;font-size:9pt;color:#1A75EA;">
						<text>更多>></text>
					</view>
				</view>
			</uni-card>
			<uni-fab ref="fab" 
					:pattern="pattern" 
					:horizontal="horizontal" 
					:vertical="vertical"
					:direction="direction"
					@fabClick="toAddFactory"/>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#1A75EA',
					buttonColor: '#1A75EA',
					iconColor: '#fff'
				},
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				factoryList: [
					{
						name: '单单一号服饰',
						linkman: '管单单',
						phone: '18900000009',
						headerImg: 'https://upload.shejihz.com/wp-content/uploads/2021/04/b21ae33fab7c575fce39083f552b570c.jpg',
						cargoList: [
							{
								name: '短袖T恤男',
								sizeList: [
									{
										name: 'M',
										count: 91809
									},
									{
										name: 'L',
										count: 1809
									},
									{
										name: 'XL',
										count: 189
									},
									{
										name: 'XXL',
										count: 89
									}
								]
							}
						]
					}
				]
			}
		},
		methods: {
			toAddFactory(e) {
				uni.navigateTo({
					url: '/pages/factory/factory_add'
				})
			}
		}
	}
</script>

<style>
page {
	height:100%;
	width:750rpx;
	display:flex;
}
.facotry-item {
	font-size:12pt;
	color:#181818;
}
.header-img {
	width: 160rpx;
	height: 160rpx;
}
</style>
